<template>
	<div class="content-box">
		<div class="address">
			<div>
				<p>您当前所在位置</p>
				<router-link to="/" class="link">售后状态记录-团体</router-link>
			</div>
		</div>
		<div class="roder-details">
			<div class="info">
				<h3 class="title">售后记录跟踪</h3>
				<h4 class="title10">2020-10-12 10:36</h4>
				<div class="text11">
					<p>申请售后：</p>
					<div>
						<p>售后原因：面料颜色不对</p>
						<div class="imgs">
							<img src="../../assets/u12208.png" alt="">
							<img src="../../assets/u12208.png" alt="">
							<img src="../../assets/u12208.png" alt="">
						</div>
						<p>售后原因：面料颜色不对</p>
						<div class="table-css" style="width: 800px;">
							<a-table class="table1" lign="center" :columns="column2" :data-source="data1">
								<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
								
							</a-table>
						</div>
					</div>
				</div>
		
				<h4 class="title10">2020-10-13 10:36</h4>
				<div class="text11">
					<p>售后状态：</p>
					<div>
						<p>已拒绝</p>
						<p>备注信息：面料不足</p>
						<div class="table-css" style="width: 800px;">
							<a-table class="table1" lign="center" :columns="column1" :data-source="data1">
								
							</a-table>
						</div>
					</div>
				</div>
				<h4 class="title10">2020-10-13 10:36</h4>
				<div class="text11">
					<p>售后状态：</p>
					<div>
						<p>已接受</p>
						<p>备注信息：暂无</p>
					</div>
				</div>
				<h4 class="title10">2020-10-13 10:36</h4>
				<div class="text11">
					<p>售后状态：</p>
					<div>
						<p>已接受</p>
						<p>备注信息：暂无</p>
					</div>
				</div>
				<div class="text11">
					<p>发货：</p>
					<div>
						<p>时间：2020-10-14 16:36</p>
						<p>运单号：223467643314</p>
					</div>
				</div>
				<div class="text11">
					<p> </p>
					<div>
						<p style="color: rgb(193, 151, 41);">时间：2020-10-14 16:36</p>
						<p style="color: rgb(193, 151, 41);">运单号：223467643314</p>
					</div>
				</div>
				<div class="text11">
					<p> </p>
					<div>
						<p>时间：2020-10-14 16:36</p>
						<p>运单号：223467643314</p>
					</div>
				</div>
		
				<div class="text11">
					<p> </p>
					<div>
						<div class="inputes">
							<input type="text" placeholder="运单号">
							<a-select default-value="德邦物流" style="width: 180px">
								<a-select-option value="顺丰">
									顺丰
								</a-select-option>
								<a-select-option value="德邦物流">
									德邦物流
								</a-select-option>
								<a-select-option value="其他" >
									其他
								</a-select-option>
							</a-select>
						</div>
						<a href="" class="fh">发货</a>
					</div>
				</div>
		
		
				<h4 class="title10">2020-10-13 10:36</h4>
				<div class="text11">
					<p>售后状态：</p>
					<div>
						<p>产品已收</p>
						<p>备注信息：暂无</p>
					</div>
				</div>
				<div class="text11">
					<p>产品状态：</p>
					<div>
						<p>时间：2020-10-13 10:36</p>
						<p>等待面料</p>
						<p>时间：2020-10-14 10:36</p>
						<p>开始生产</p>
						<div class="table-css" style="width: 800px;">
							<a-table class="table1" lign="center" :columns="column3" :data-source="data1">
								<p slot="k6" slot-scope="text" >缝制</p>
								
							</a-table>
						</div>
					</div>
				</div>
				
				
				<h4 class="title10">2020-10-13 10:36</h4>
				<div class="text11">
					<p>售后状态：</p>
					<div>
						<p>产品发货</p>
						<p>备注信息：暂无</p>
						<div class="table-css" style="width: 800px;">
							<a-table class="table1" lign="center" :columns="column4" :data-source="data1">
								<a slot="k6" slot-scope="text" style="color:#C49D18">查看</a>
							</a-table>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	
</template>

<script>
	const column2 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '员工部门',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '员工姓名',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '员工编号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '产品',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '售后类型',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '操作',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		}
	];
	const column1 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '员工部门',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '员工姓名',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '员工编号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '产品',
			key: 'k5',
			dataIndex: 'k5'
		},
		
	];
	const column3 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '员工部门',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '员工姓名',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '员工编号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '产品',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '产品状态',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
	];
	const column4 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '员工部门',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '员工姓名',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '员工编号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '产品',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '批次信息',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
	];
	const data1 = [{
		k1: '1',
		k2: '销售部',
		k3: '支彬',
		k4: 'ASIO01',
		k5: '西装上衣',
		k6: '返修',
		k7: '查看返修参数'
	}]
	// @ is an alias to /src
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	export default {
		name: 'MyAfterSales',
		data() {
			return {
				locale,
				data1,
				column2,
				column1,
				column3,
				column4
			}
		},
		methods: {
			selectTab: function(dataStr, i) {
				this[dataStr] = i
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-box {
		background-color: #fff;
	}
	.roder-details {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		padding: 0px 35px;

		.info {
			padding-top: 30px;
			padding-left: 26px;
			position: relative;
			min-height: 800px;

			.inputes {
				margin-bottom: 20px;
				display: flex;

				&>input {
					margin-right: 10px;
					width: 173px;
					height: 34px;
					padding: 3px 2px 3px 2px;
					font-family: 'ArialMT', 'Arial';
					font-weight: 400;
					font-style: normal;
					font-size: 13px;
					text-decoration: none;
					letter-spacing: normal;
					color: #000000;
					vertical-align: none;
					text-align: left;
					text-transform: none;
					background-color: transparent;
					border: 1px solid rgba(220, 223, 230, 1);
					padding-left: 4px;
				}
			}

			.fh {
				width: 82px;
				height: 36px;
				background-color: rgba(81, 81, 81, 1);
				border-radius: 3px;
				display: block;
				line-height: 36px;
				text-align: center;
				color: rgb(236, 227, 0);
			}

			.imgs {
				display: flex;
				margin-bottom: 20px;

				img {
					width: 88px;
					height: 88px;
					margin-right: 10px;
				}
			}



			.text11 {
				display: flex;
				margin-bottom: 20px;

				&>p {
					width: 100px;
					font-weight: 100;
					font-size: 14px;
					color: #333;

				}

				&>div {
					&>h5 {
						color: #333;
						font-size: 15px;
						font-weight: 500;

						display: block;
					}

					&>p {
						color: #333;
						font-size: 15px;
						font-weight: 100;

						display: block;
					}
				}
			}

			.title10 {
				color: #333;
				font-weight: 700;
				font-size: 16px;
				line-height: 16px;
				margin-bottom: 20px;
			}

			.text10 {
				display: flex;
				margin-bottom: 20px;

				&>p {
					width: 100px;
					font-weight: 100;
					font-size: 14px;
					color: #333;

				}

				div {
					span {
						color: #333;
						font-size: 15px;
						font-weight: 100;

						&.b {
							font-weight: 500;
						}

						display: block;
					}
				}
			}

			.table-css {
				position: relative;

				.bz {
					width: 447px;
					height: 63px;
					background: inherit;
					background-color: rgba(255, 221, 202, 1);
					position: absolute;
					right: 0px;
					top: -63px;
					display: flex;
					align-items: center;
					justify-content: center;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					flex-direction: column;

					p {
						width: 100%;
						color: rgb(251, 8, 8);
						font-size: 13px;
						padding-left: 10px;
						margin-bottom: 0px;
						line-height: 16px;
					}
				}
			}

			.btns {
				margin-top: 25px;
				margin-bottom: 60px;
				display: flex;

				.btn1 {

					border-width: 0px;
					width: 105px;
					height: 42px;
					background: inherit;
					background-color: rgba(81, 81, 81, 1);
					border: none;
					border-radius: 3px;
					-moz-box-shadow: none;
					-webkit-box-shadow: none;
					box-shadow: none;
					font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
					font-weight: 500;
					font-style: normal;
					font-size: 13px;
					text-align: center;
					display: block;
					color: rgb(236, 227, 0);
					line-height: 40px;
					margin-right: 20px;
					cursor: pointer;
				}

				.btn2 {

					border-width: 0px;
					width: 105px;
					height: 42px;
					background: inherit;
					background-color: rgba(244, 244, 244, 1);
					border: none;
					border-radius: 3px;
					-moz-box-shadow: none;
					-webkit-box-shadow: none;
					box-shadow: none;
					font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
					font-weight: 500;
					font-style: normal;
					font-size: 13px;
					text-align: center;
					display: block;
					color: rgb(104, 104, 104);
					line-height: 40px;
					margin-right: 20px;
					cursor: pointer;
				}
			}


			.price {
				color: rgb(38, 38, 38);
				font-size: 16px;

				span {
					color: rgb(215, 1, 1);
				}

				margin: 35px 0px;
			}

			.text1 {
				width: 533px;
				height: 105px;
				padding: 3px 2px 3px 2px;
				font-family: 'ArialMT', 'Arial';
				font-weight: 400;
				font-style: normal;
				font-size: 13px;
				text-decoration: none;
				letter-spacing: normal;
				color: #000000;
				vertical-align: none;
				text-align: left;
				text-transform: none;
				background-color: #f9f9f9;
				border-color: transparent;
				resize: none;
				outline: none;
				padding: 10px;
			}

			.tabs {
				.tab {
					margin-bottom: 10px;
					display: flex;

					h5 {
						width: 112px;
						padding: 2px 2px 2px 24px;
						background-color: rgba(249, 249, 249, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						height: 36px;
						align-items: center;
						margin: 0px !important;
						margin-right: 6px !important;
					}

					.tab-content {
						height: 36px;
						display: flex;

						p {
							border: 1px solid rgb(242, 242, 242);
							min-width: 100px;
							height: 36px;
							height: 36px;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 15px;
							color: #333;
							font-size: 15px;
							margin-right: 6px;

							cursor: pointer;

							b {
								display: none;
								font-weight: 700;
							}

							&.active {
								color: rgb(255, 236, 112);
								font-weight: 700;
								background-color: rgb(74, 74, 74);
							}

							&:hover {
								b {
									display: block;
								}

								span {
									display: none;
								}
							}
						}
					}
				}
			}

			h3.title {
				height: 30px;
				line-height: 30px;
				position: relative;
				font-size: 16px;
				color: #333;
				font-weight: 700;
				margin-bottom: 25px;

				&:after {
					position: absolute;
					height: 100%;
					width: 5px;
					position: absolute;
					left: -25px;
					top: 0px;
					background-color: rgba(74, 74, 74, 1);
					content: "";
				}
			}

			.title2 {
				width: 112px;
				padding: 2px 2px 2px 24px;
				font-size: 15px;
				color: #333;
				display: flex;
				height: 36px;
				align-items: center;
				margin: 0px !important;
				margin-bottom: 10px !important;
			}

			.list {
				margin-bottom: 20px;

				.list-div {
					display: flex;
					flex-wrap: wrap;

					div {
						width: 33.3%;
						display: flex;
						height: 36px;
						align-items: center;

						p {
							width: 112px;
							padding: 2px 2px 2px 24px;
							background-color: rgba(249, 249, 249, 1);
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;
							margin: 0px !important;
						}

						span {
							width: calc(100% - 112px);
							padding: 2px 2px 2px 24px;
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;

							&.b {
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
</style>
